<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>叠加wmts雨量站图层</title>
    <!--<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="./css/ol.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="./css/ktol3.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="./css/mapPop.css" type="text/css" />-->
    <!--<link href="./css/widgets.css" rel="stylesheet" />-->
    <!--<link href="./css/pretty.css" rel="stylesheet" />-->
    <!--<script type="text/javascript" src="./js/include-web.js"></script>-->
    <!--<script type="text/javascript" src="./js/include-ol.js"></script>-->
    <style>
        .cesium-viewer .cesium-widget-credits {
            display: none !important;
        }
    </style>
</head>
<!--<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>-->
<script type="text/javascript" src="./js/ol.js"></script>
<script type="text/javascript" src="./js/proj4.js"></script>

<body
        style="
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        "
>
<div id="map" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
    // 4490坐标系需自定义
    proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs')
    var projection = new ol.proj.get('EPSG:4490')
    projection.setExtent([-180, -90, 180, 90])

    // 指定此Arcgis图层的分辨率
    var resolutions = [
        0.001373291015624828,
        0.000686645507812414,
        0.000343322753906207,
        0.0001716613769531035,
        0.00008583068847655175,
        0.000042915344238275876,
        0.000021457672119137938,
        0.000010728836059568969,
        0.0000053644180297844846,
        0.0000026822090148922423,
        0.0000013411045074461211,
    ]
    var matrixIds = []
    for (var z = 0; z < resolutions.length; ++z) {
        matrixIds[z] = z
    }
    //todo:1.水源大厦可以访问；正常网络可以访问；但是中南院的vpn不能访问
    // var url ='http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_BASEMAP_ZW2K/MapServer/tile/{z}/{y}/{x}'
    // var url ='http://192.168.101.64:8889/api161/tilemap_1/rest/services/SZMAP/SZMAP_BASEMAP_ZW2K/MapServer/tile/{z}/{y}/{x}'


    var url ='http://192.168.101.44:8889/api161/tilemap_1/rest/services/SZIMAGE/SZAVI201712_20ZW2K/ImageServer/tile/{z}/{y}/{x}'


    var view = new ol.View({
        projection: projection, //坐标系参数如果不设置，则默认为墨卡托
        resolutions: resolutions, //分辨率层级数组
        center: [114.139825956825, 22.6513875967627],
        zoom: 1,
    })

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: url,
                    projection: projection,
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: [-180, 90],
                        tileSize: 256,
                        resolutions: resolutions,
                        matrixIds: matrixIds,
                    }),
                }),
            }),
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false,
            },
        }),
        view: view,
    })
</script>
</body>
</html>
